<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>汽车出场模拟扫描</title>
    <link rel="stylesheet" href="/static/assets/css/layui.css" media="all">
    <script src="/static/assets/jquery.min.js"></script>
</head>
<body>
<div style="padding: 20px; background-color: #F2F2F2;height: 94vh">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">出场识别</div>
                <div class="layui-card-body">
                    <input type="hidden" name="images" class="image">
                    <div class="layui-form-item">
                        <label class="layui-form-label ">出场扫描:</label>
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="test1">出场扫描</button>
                            <div class="layui-upload-list">
                                <img style="width: 500px;height: 320px" class="layui-upload-img" id="demo1">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">智能化停车场</div>
                <div class="layui-card-body" style="height: 393px">
                    <h1>无人收费</h1><br>
                    欢迎您再次来停车<br>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/assets/layui.js"></script>
<script>
    $(function () {
        layui.use(['element','upload', 'layer'], function () {
            var upload = layui.upload,
                layer = layui.layer,
                element = layui.element

            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/upload/show'
                , accept: 'images'
                , size: 50000
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    var filePath = res.data.filePath
                    //如果上传失败
                    if (res.code !== 200) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #4cae4c;">上传成功</span>');

                    var fileupload = $("#headImg");
                    fileupload.attr("src", filePath);
                    $.ajax({
                        url: "/scanCarNum",
                        type: "post",
                        dataType: "json",
                        data: {imgUrl:  filePath},
                        success: function (res) {
                            console.log(res)
                            var carNum = res.data.carNum.number
                            layer.msg("车牌号：" + carNum)
                            setTimeout(function () {
                                $.ajax({
                                    url: "/accessInfo/out",
                                    type: "post",
                                    dataType: "json",
                                    data: {
                                        carNum: carNum,
                                        outImg: filePath
                                    },
                                    success: function (res) {
                                        console.log(res)
                                        layer.msg("车辆类型：" + res.data.type + "，停车时长：" + res.data.stayTime)
                                        setTimeout(function () {
                                            if (res.data.type === "临时停车用户") {
                                                layer.msg("您的费用为：" + res.data.price + "元")
                                                setTimeout(function () {
                                                    if (res.data.price !== 0) {
                                                        location.href = "/alipay?payMoney=" + res.data.price+"&carNum="+carNum
                                                    } else {
                                                        layer.msg(carNum + "祝你一路顺风")
                                                        setTimeout(function () {
                                                            location.href = "/desk/main"
                                                        }, 2000)
                                                    }
                                                })
                                            } else {
                                                layer.msg(carNum + "祝你一路顺风")
                                                setTimeout(function () {
                                                    location.href = "/desk/main"
                                                }, 2000)
                                            }
                                        }, 2000)


                                    }
                                })
                            }, 2000)

                        },
                        error: function (res) {
                            layer.msg("扫描不正确，请再次扫描")
                        }

                    })
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    })

</script>
</body>
</html>
